<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery.min.js"></script>
<script src="js/excanvas.min.js"></script>
<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery.flot.pie.min.js"></script>
<title>Untitled Document</title>
<link href="css/reset.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>

<body>
<div id="wapper">
	<div class="navi-1">
    	<div class="padding-10">
            <div class="search">
                <a href="#" class="button-violet">Find</a>
                <input type="text" name="" value="" />
            </div>
            <div class="menu">
                <p>Richard Halpin - Administrator</p>
                <ul>
                    <li><a href="#">Help</a></li>
                    <li><a href="#">My Profile</a></li>
                    <li><a href="#" class="last">Logout</a></li>
                </ul>
            </div>
    	</div>
    </div><!-- .navi-1 -->
    <div class="navi-2">
    	<div class="left-menu">
        	<ul class="navi-2">
            	<li><a href="#">Clients</a></li>
                <li><a href="#">Vendors</a></li>
                <li><a href="#" class="last">Applications</a></li>
            </ul>
        </div>
    	<div class="right-menu">
        	<ul class="navi-2 right-nav">
            	<li><a href="#">Dashboard</a></li>
                <li><a href="#" class="active">Reports</a></li>
                <li><a href="#" class="last">Utilities</a></li>
            </ul>
        </div>
    </div><!-- .navi-2 -->
    <div class="nav-center">
    	<div class="top-nav">
            <ul>
                <li><a href="#">Properties</a></li>
                <li><a href="#">Market</a></li>
                <li class="last"><a href="#">Calendar</a></li>
            </ul>
        </div>
        <div class="bottom-nav">
        	<ul>
            	<li><a href="#">Funding</a></li>
                <li><a href="#">Contracts</a></li>
                <li><a href="#">Purchases</a></li>
                <li><a href="#">Jobs</a></li>
                <li><a href="#">Accounts</a></li>
                <li><a href="#">Inventory</a></li>
                <li class="last"><a href="#">Resales</a></li>
            </ul>
        </div>
    </div><!-- .nav-center -->
    <div class="nav-3">
    	<p class="left-title">Properties - Purchases</p>
    </div><!-- .nav-3 -->
    <div class="nav-4">
    	<span class="transactions">
        	Transactions: <input type="text" name="" value="1005" />
        </span>
        <span class="show">
        	<input type="checkbox" name="" value="" /> Show only my transactions
        </span>
        <span class="date-box">
        	<div class="box-1">
        		From: <input type="text" name="" value="jan 5, 2013" /><input type="button" class="button" />
            </div>
            <div class="box-2">
            	To: <input type="text" name="" value="jan 5, 2013" /><input type="button" class="button" />
            </div>
        </span>
        <span class="show">
        	<input type="checkbox" name="" value="" /> All Dates
        </span>
        <div class="actions-button">
        	<span class="button-search">
        		<a href="#" class="button-violet large-padding">Search</a>
            </span>
            <span class="button-auto">
        		<a href="#" class="button-violet large-padding">Auto Sort</a>
            </span>
        </div>
    </div><!-- .nav-4 -->
    <div class="nav-5">
    	<table class="left-box">
        	<tr>
            	<td><label>Status</label></td>
                <td>
                	<input type="button" name="" value="" class="check-button">
                </td>
            	<td><label>Client</label></td>
                <td>
                	<input type="button" name="" value="" class="check-button">
                </td>
            	<td><label>Contractor</label></td>
                <td>
                	<input type="button" name="" value="" class="check-button">
                </td>
            	<td><label>Invester</label></td>
                <td>
                	<input type="button" name="" value="" class="check-button">
                </td>
            	<td><label>ST</label></td>
                <td>
                	<input type="button" name="" value="" class="check-button">
                </td>
            </tr>
        	<tr>
            	<td><label>Type</label></td>
                <td>
                	<input type="button" name="" value="" class="check-button">
                </td>
            	<td><label>Company</label></td>
                <td>
                	<input type="button" name="" value="" class="check-button">
                </td>
            	<td><label>Consultant</label></td>
                <td>
                	<input type="button" name="" value="" class="check-button">
                </td>
            	<td><label>Fund</label></td>
                <td>
                	<input type="button" name="" value="" class="check-button">
                </td>
            	<td><label>CO</label></td>
                <td>
                	<input type="button" name="" value="" class="check-button">
                </td>
            </tr>
        </table>
        <table class="right-box" cellpadding="0" cellspacing="0">
        	<tr>
            	<td><label>Map Legend</label></td>
                <td><span class="green">&nbsp;</span></td>
                <td>High Pos</td>
                <td><span class="violet">&nbsp;</span></td>
            	<td>Med Pos</td>
                <td><span class="turquois">&nbsp;</span></td>
            	<td>Low Pos</td>
                <td><span class="yellow">&nbsp;</span></td>
            	<td>Low Neg</td>
                <td><span class="orange">&nbsp;</span></td>
            	<td>Med Neg</td>
                <td><span class="red">&nbsp;</span></td>
            	<td>High Neg</td>
            </tr>
            <tr>
            	<td class="text-algin">View</td>
                <td><input type="checkbox" name="" value="" /></td>
            	<td></td>
                <td><input type="checkbox" name="" value="" /></td>
            	<td></td>
                <td><input type="checkbox" name="" value="" /></td>
            	<td></td>
                <td><input type="checkbox" name="" value="" /></td>
            	<td></td>
                <td><input type="checkbox" name="" value="" /></td>
            	<td></td>
                <td><input type="checkbox" name="" value="" /></td>
                <td rowspan="2" class="border-none">
                	<button  type="button" class="small-button-violet">Trend<span class="caret"></span><br />Length</button>
                </td>
            </tr>
            <tr>
            	<td class="text-algin border-none">Trend</td>
                <td class="border-none"><input type="checkbox" name="" value="" /></td>
            	<td class="border-none"></td>
                <td class="border-none"><input type="checkbox" name="" value="" /></td>
            	<td class="border-none"></td>
                <td class="border-none"><input type="checkbox" name="" value="" /></td>
            	<td class="border-none"></td>
                <td class="border-none"><input type="checkbox" name="" value="" /></td>
            	<td class="border-none"></td>
                <td class="border-none"><input type="checkbox" name="" value="" /></td>
            	<td class="border-none"></td>
                <td class="border-none"><input type="checkbox" name="" value="" /></td>
            </tr>
        </table>
    </div><!-- .nav-5 -->
    <div class="nav-6">
    	<p class="title">Dashboard</p>
        <div class="menu-1">
        	<ul>
            	<li class="yellow"><a href="#">Alerts</a></li>
                <li class="green line"><a href="#">Top Producers</a></li>
                <li class="green"><a href="#">P & L</a></li>
            </ul>
        </div>
    </div><!-- .nav-6 -->
    <div class="container">
    	<div id="left_panel_chart-1">
        	<div class="divChart-box-3">
            	<div class="divChart-box-3-title">
                    <h2 class="LeftdivChart-box-3-title">
                        Income and Expense Trend
                    </h2>
                    <div class="RightdivChart-box-3-title">
                    	<a href="#" class="close-down"></a>
                        <a href="#" class="close-window"></a>
                    </div>
                </div>
                <div class="divChart-box-3-content">
                  <div class="divChart-box-3-Subtitle">
                        <div class="divChart-box-3-Subtitle-Left">
                            
                        </div>
                        <div class="divChart-box-3-Subtitle-Right">
                        	<select name="">
                            	<option>This year to date</option>
                            </select>
                        </div>
                    </div>
                    <table cellpadding="0" cellspacing="0" width="100%" border="0" class="divChart-box-3-table">
                    	<tr>
                        	<td colspan="25" class="divChart-box-3-top-statics">$ in 1000s</td>
                        </tr>
                    	<tr>
                        	<td width="89">
                            	<ul class="divChart-box-3-number">
                                	<li>
                                    	70
                                    </li>
                                	<li>
                                    	60
                                    </li>
                                	<li>
                                    	50
                                    </li>
                                	<li>
                                    	40
                                    </li>
                                	<li>
                                    	30
                                    </li>
                                	<li>
                                    	20
                                    </li>
                                	<li>
                                    	10
                                    </li>
                                	<li>
                                    	0
                                    </li>
                                </ul>
                            </td>
                            <td width="10"><img alt="" src="images/bar-chart-color-blue.gif" height="250" width="10" /></td>
                            <td width="33"><img alt="" src="images/bar-chart-color-orange.gif" height="100" width="10" /></td>
                            <td width="10"><img alt="" src="images/bar-chart-color-blue.gif" height="80" width="10" /></td>
                            <td width="33"><img alt="" src="images/bar-chart-color-orange.gif" height="120" width="10" /></td>
                            <td width="10"><img alt="" src="images/bar-chart-color-blue.gif" height="70" width="10" /></td>
                            <td width="33"><img alt="" src="images/bar-chart-color-orange.gif" height="20" width="10" /></td>
                            <td width="10"><img alt="" src="images/bar-chart-color-blue.gif" height="30" width="10" /></td>
                            <td width="33"><img alt="" src="images/bar-chart-color-orange.gif" height="10" width="10" /></td>
                            <td width="10"><img alt="" src="images/bar-chart-color-blue.gif" height="130" width="10" /></td>
                            <td width="33"><img alt="" src="images/bar-chart-color-orange.gif" height="100" width="10" /></td>
                            <td width="10"><img alt="" src="images/bar-chart-color-blue.gif" height="80" width="10" /></td>
                            <td width="33"><img alt="" src="images/bar-chart-color-orange.gif" height="60" width="10" /></td>
                            <td width="10"><img alt="" src="images/bar-chart-color-blue.gif" height="100" width="10" /></td>
                            <td width="33"><img alt="" src="images/bar-chart-color-orange.gif" height="110" width="10" /></td>
                            <td width="10"><img alt="" src="images/bar-chart-color-blue.gif" height="90" width="10" /></td>
                            <td width="33"><img alt="" src="images/bar-chart-color-orange.gif" height="40" width="10" /></td>
                            <td width="10"><img alt="" src="images/bar-chart-color-blue.gif" height="60" width="10" /></td>
                            <td width="35"><img alt="" src="images/bar-chart-color-orange.gif" height="100" width="10" /></td>
                            <td width="10"><img alt="" src="images/bar-chart-color-blue.gif" height="130" width="10" /></td>
                            <td width="35"><img alt="" src="images/bar-chart-color-orange.gif" height="100" width="10" /></td>
                            <td width="10"><img alt="" src="images/bar-chart-color-blue.gif" height="50" width="10" /></td>
                            <td width="33"><img alt="" src="images/bar-chart-color-orange.gif" height="100" width="10" /></td>
                            <td width="10"><img alt="" src="images/bar-chart-color-blue.gif" height="80" width="10" /></td>
                            <td width="57"><img alt="" src="images/bar-chart-color-orange.gif" height="100" width="10" /></td>
                        </tr>
                    	<tr>
                        	<td></td>
                            <td colspan="2">Jan</td>
                            <td colspan="2">Feb</td>
                            <td colspan="2">Mar</td>
                            <td colspan="2">Apr</td>
                            <td colspan="2">May</td>
                            <td colspan="2">Jun</td>
                            <td colspan="2">Jul</td>
                            <td colspan="2">Aug</td>
                            <td colspan="2">Sep</td>
                            <td colspan="2">Oct</td>
                            <td colspan="2">Nov</td>
                            <td colspan="2">Dec<br />1-15</td>
                        </tr>
                    </table>
                    <ul class="divChart-box-3-bottom-notes">
                        <li class="divIncomeNotes"></li>
                        <li>Income</li>
                        <li class="divExpenseNotes"></li>
                        <li>Expense</li>
                    </ul>
                </div>
            </div><!-- .divChart-box-3 -->
        	<div class="divChart-box-3">
            	<div class="divChart-box-3-title">
                    <h2 class="LeftdivChart-box-3-title">
                        Income and Expense Trend
                    </h2>
                    <div class="RightdivChart-box-3-title">
                    	<a href="#" class="close-down"></a>
                        <a href="#" class="close-window"></a>
                    </div>
                </div>
                <div class="divChart-box-3-content">
                  <div class="divChart-box-3-Subtitle">
                        <div class="divChart-box-3-Subtitle-Left">
                            
                        </div>
                        <div class="divChart-box-3-Subtitle-Right">
                        	<select name="">
                            	<option>This year to date</option>
                            </select>
                        </div>
                    </div>
                    <div id="placeholder"></div>
                    <!-- Javascript -->
						<script type="text/javascript">
                        var data = [
                            { label: "54000 J...",  data: 80, color: "#de201f"},
                            { label: "62700 P...",  data: 60, color: "#ef9a9b"},
                            { label: "62100 I...",  data: 20, color: "#f48d2f"},
                            { label: "60100 C...",  data:10, color: "#f8c89a"},
                            { label: "Others AC",  data: 20, color: "#fbe69f"}
                        ];
                         
                        $(document).ready(function () {
                            $.plot($("#placeholder"), data, {
                                 series: {
                                    pie: {
                                        show: true
                                    }
                                 },
                                 legend: {
                                    labelBoxBorderColor: "none"
                                 }
                            });
                        });
                        </script>
                        <div class="divTotal-pieChart">
                        	Total:$336,336,996
                        </div>
                </div>
            </div><!-- .divChart-box-3 -->            
        </div><!-- #left_panel_chart-1 -->
        <div id="right_panel_chart-1">
        	<div class="divChart-box-3">
            	<div class="divChart-box-3-title">
                    <h2 class="LeftdivChart-box-3-title">
                        Income and Expense Trend
                    </h2>
                    <div class="RightdivChart-box-3-title">
                    	<a href="#" class="close-down"></a>
                        <a href="#" class="close-window"></a>
                    </div>
                </div>
                <div class="divChart-box-3-content">
                  <div class="divChart-box-3-Subtitle">
                        <div class="divChart-box-3-Subtitle-Left">
                        	<select name="">
                            	<option>All</option>
                                <option>2012</option>
                                <option>2013</option>
                            </select>
                        </div>
                        <div class="divChart-box-3-Subtitle-Right">
                        	<select name="">
                            	<option>This year to date</option>
                            </select>
                        </div>
                    </div>
                    <table cellpadding="0" cellspacing="0" width="100%" border="0" class="divChart-box-3-table">
                    	<tr>
                        	<td colspan="18" class="divChart-box-3-top-statics">$ in 1000s</td>
                        </tr>
                    	<tr>
                        	<td width="60">
                            	<ul class="divChart-box-3-number-2">
                                	<li>
                                    	500
                                    </li>
                                	<li>
                                    	400
                                    </li>
                                	<li>
                                    	300
                                    </li>
                                	<li>
                                    	200
                                    </li>
                                	<li>
                                    	100
                                    </li>
                                	<li>
                                    	0
                                    </li>
                                </ul>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><img alt="" src="images/bar-chart-color-blue-20.gif" width="20" height="30" /></td>
                            <td><img alt="" src="images/bar-chart-color-green-20.gif" width="20" height="100" /></td>
                            <td><img alt="" src="images/bar-chart-color-green-20.gif" width="20" height="240" /></td>
                        </tr>
                    	<tr>
                        	<td></td>
                            <td>2012</td>
                            <td>2013</td>
                            <td>2014</td>
                            <td>2015</td>
                            <td>2016</td>
                            <td>2017</td>
                        </tr>
                    </table>
                    <ul class="divChart-box-3-bottom-notes">
						<li class="divIncomeNotes"></li>
                        <li>Current Year</li>
                        <li class="divYearBlueNotes"></li>
                        <li>Prior Year (s)</li>
                  </ul>
                </div>
            </div><!-- .divChart-box-3 -->
        	<div class="divChart-box-3">
            	<div class="divChart-box-3-title">
                    <h2 class="LeftdivChart-box-3-title">
                        Income and Expense Trend
                    </h2>
                    <div class="RightdivChart-box-3-title">
                    	<a href="#" class="close-down"></a>
                        <a href="#" class="close-window"></a>
                    </div>
                </div>
                <div class="divChart-box-3-content">
                  <div class="divChart-box-3-Subtitle">
                        <div class="divChart-box-3-Subtitle-Left">
                        	<select name="">
                            	<option>All</option>
                                <option>2012</option>
                                <option>2013</option>
                            </select>
                        </div>
                        <div class="divChart-box-3-Subtitle-Right">
                        	<select name="">
                            	<option>This year to date</option>
                            </select>
                        </div>
                    </div>
                    <table cellpadding="0" cellspacing="0" width="100%" border="0" class="divChart-box-3-table">
                    	<tr>
                        	<td colspan="18" class="divChart-box-3-top-statics">$ in 1000s</td>
                        </tr>
                    	<tr>
                        	<td width="60">
                            	<ul class="divChart-box-3-number-3">
                                    <li>
                                    	350
                                    </li>
                                	<li>
                                    	3001
                                    </li>
                                	<li>
                                    	250
                                    </li>
                                	<li>
                                    	200
                                    </li>
                                	<li>
                                    	150
                                    </li>
                                	<li>
                                    	100
                                    </li>
                                	<li>
                                    	50
                                    </li>
                                	<li>
                                    	0
                                    </li>
                                </ul>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td><img alt="" src="images/bar-chart-color-yellow-20.gif" width="20" height="30" /></td>
                            <td><img alt="" src="images/bar-chart-color-yellow-20.gif" width="20" height="100" /></td>
                            <td><img alt="" src="images/bar-chart-color-orange-20.gif" width="20" height="235" /></td>
                        </tr>
                    	<tr>
                        	<td></td>
                            <td>2012</td>
                            <td>2013</td>
                            <td>2014</td>
                            <td>2015</td>
                            <td>2016</td>
                            <td>2017</td>
                        </tr>
                    </table>
                    <ul class="divChart-box-3-bottom-notes">
						<li class="divYearOrangeNotes"></li>
                        <li>Current Year</li>
                        <li class="divYearYellowNotes"></li>
                        <li>Prior Year (s)</li>
                  </ul>
                </div>
            </div><!-- .divChart-box-3 -->
        </div><!-- #right_panel_chart-1 -->
    </div><!-- .container -->
</div>
</body>
</html>
